//1.调用判断是否登录的函数
checkLogin()
// 2.调用抽取用户名渲染函数
renderUserName()
// 3.调用抽取用户退出登录函数
registerLogout()
// 4.抽取函数获取学员数据
async function getData(){
    // 获取数据
    const res= await axios.get('/students')
    // console.log(res);
    const html=res.data.map(v=>{
        const {name,age,gender,group,hope_salary,salary,province,city,area,id}=v
        return `
            <tr>
                <td>${name}</td>
                <td>${age}</td>
                <td>${!gender?'男':'女'}</td>
                <td>第${group}组</td>
                <td>${hope_salary}</td>
                <td>${salary}</td>
                <td>${province+city+area}</td>
                <td date-id=${id}>
                <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                </td>
            </tr>
        `
    }).join('')
    document.querySelector('.list').innerHTML=html
    document.querySelector('.total').innerText=res.data.length
}
getData()
// 5.显示弹框
const modalDom=document.querySelector('#modal')
const modal=new bootstrap.Modal(modalDom)
document.querySelector('#openModal').addEventListener('click',()=>{
    modal.show()
})

// 6.省市区联动
const proSelect=document.querySelector('[name=province]')
const citySelect=document.querySelector('[name=city]')
const areaSelect=document.querySelector('[name=area]')
async function initSelect(){
 //省数据获取+渲染
 const proRes=await axios.get('/api/province')
 const proHtml=proRes.list.map(v=>{
     return `<option value="${v}">${v}</option>`
 }).join('')
 proSelect.innerHTML=`
 <option value="">--省份--</option>
 ${proHtml}
 `
//市数据获取+渲染
proSelect.addEventListener('change',async()=>{
    const cityRes =await axios.get('/api/city',{
        params:{
            pname:proSelect.value
        }
    })
    const cityHtml=cityRes.list.map(v=>{
        return`
        <option value="${v}">${v}</option>
        `
    }).join('')
    citySelect.innerHTML=`
    <option value="">--城市--</option>
    ${cityHtml}
    `
    areaSelect.innerHTML=`
    <option value="">--地区--</option>
    `

})
//区数据获取+渲染
citySelect.addEventListener('change',async()=>{
    const areaRes =await axios.get('/api/area',{
        params:{
            pname:proSelect.value,
            cname: citySelect.value
        }
    })
    const areaHtml=areaRes.list.map(v=>{
        return`
        <option value="${v}">${v}</option>
        `
    }).join('')
    areaSelect.innerHTML=`
    <option value="">--地区--</option>
    ${areaHtml}
    `
})
}
initSelect()

//7. 数据新增
document.querySelector('#submit').addEventListener('click',()=>{
    if (modalDom.dataset.id) {
        // 后续调用保存修改的函数
        saveEdit()
      } else {
        // 调用新增学员函数
        addStudent()
      }
})
// 8.函数抽取-新增学员
  async function addStudent() {
    //8.1 数据收集+转换+提交
    const form = document.querySelector('#form')
    const data = serialize(form, { hash: true, empty: true })
  
    data.age = +data.age
    data.gender = +data.gender
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.group = +data.group
    // console.log(data)
  
    try {
      // 新增成功
      const res = await axios.post('/students', data)
      showToast(res.message)
      getData()
    } catch (error) {
      // 新增失败
      // console.dir(error)
      showToast(error.response.data.message)
    }
    modal.hide()
  
  
  }
  
  // 9.绑定事件
  document.querySelector('.list').addEventListener('click', (e) => {
    // 9.1点了删除标签-调用对应的函数
    if (e.target.classList.contains('bi-trash')) {
      // console.log(e.target.parentNode.parentNode.dataset.id)
      const id = e.target.parentNode.parentNode.dataset.id
      delStudent(id)
    }
    // 9.2点了编辑标签-调用对应的函数
    if (e.target.classList.contains('bi-pen')) {
      const id = e.target.parentNode.parentNode.dataset.id
      editStudent(id)
    }
  })
  
  //10. 抽取函数-删除数据
  async function delStudent(id) {
    // console.log('点了删除')
    // console.log(id)
    // 获取id+调用接口
    await axios.delete(`/students/${id}`)
  
    // 重新渲染
    getData()
  }
  
  // 11.抽取函数-编辑学员数据
  async function editStudent(id) {
    // console.log('编辑', id)
    const res = await axios.get(`/students/${id}`)
  
    // 11.1修改标题
    document.querySelector('.modal-title').innerText = '修改学员'
  
    //11.2 设置输入框(姓名，年龄，组号，期望薪资，就业薪资)
    // 属性名数组
    const keyArr = ['name', 'age', 'group', 'hope_salary', 'salary']
    keyArr.forEach(key => {
      document.querySelector(`[name=${key}]`).value = res.data[key]
    })
  
    //11.3 设置性别（0 男，1 女）
    const { gender } = res.data
    // 伪数组[男checkbox,女checkbox]
    const chks = document.querySelectorAll('[name=gender]')
    chks[gender].checked = true
  
    //11.4设置籍贯
    const { province, city, area } = res.data
  
    //11.5设置省（设置select标签的value属性，对应的option会被选中）
    proSelect.value = province
  
    //11.6设置市
    const cityRes = await axios.get('/api/city', {
      params: {
        pname: province
      }
    })
    const cityHtml = cityRes.list.map(v => {
      return `<option value="${v}">${v}</option>`
    }).join('')
    citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`
    citySelect.value = city
  
    //11.7设置区
    const areaRes = await axios.get('/api/area', {
      params: {
        pname: province,
        cname: city
      }
    })
    const areaHtml = areaRes.list.map(v => {
      return `<option value="${v}">${v}</option>`
    }).join('')
    areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
    areaSelect.value = area
  
    //11.8弹框
    modal.show()
  
    // 保存学员id，用来却分 新增（dataset.id不存在） 编辑（dataset.id有值）
    modalDom.dataset.id = id
  }
  
  //12. 抽取函数-保存修改
  async function saveEdit() {
    console.log('保存修改')
    //12.1 数据收集+转换+提交
    const form = document.querySelector('#form')
    const data = serialize(form, { hash: true, empty: true })
    data.age = +data.age
    data.gender = +data.gender
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.group = +data.group
  
    try {
      // 修改成功
      const saveRes = await axios.put(`/students/${modalDom.dataset.id}`, data)
      showToast(saveRes.message)
      getData()
    } catch (error) {
      // 修改失败
      // console.dir(error)
      showToast(error.response.data.message)
    }
    modal.hide()
  }
